<template>
  <el-card  class="admin-header">
    <a href="/index">
      <img src="../../assets/img/icon/icon2.png" alt="" width="55px" style="float: left;margin-top: -18px;">
    </a>
    <span style="font-size: 25px;font-weight: bold;position:absolute;left: 100px;margin-top: -10px;">后台管理</span>

    <i class="el-icon-switch-button" v-on:click="logout" style="font-size: 20px;float: right;"> 退出</i>

    <i class="el-icon-monitor" v-on:click="toIndex" style="font-size: 20px;float: right;margin-right: 15px;cursor: pointer;"> 前台</i>

    <el-tag  style="font-size: 20px;float: right;margin-right: 20px;margin-top: -6px;" >欢迎您！ {{username.username}}</el-tag>

  </el-card>
</template>

<script>
  import {createRouter} from '../../router'

  export default {
    name: 'Header',
    username: '',
    computed: {
      username () {
        return {
          username: this.$store.state.username
        }
      }
    },
    methods: {
      logout () {
        var _this = this
        this.$axios.get('/logout').then(resp => {
          if (resp && resp.data.code === 200) {
            _this.$store.commit('logout')
            _this.$router.replace('/index')
            // 清空路由，防止路由重复加载
            const newRouter = createRouter()
            _this.$router.matcher = newRouter.matcher
             this.$message({
                message: '退出成功',
                type: 'success'
              })
          }
        }).catch(failResponse => {})
      },
      toIndex () {
        this.$router.replace('/index')
      }
    }
  }

</script>

<style scoped>
  .admin-header {
    height: 55px;
    opacity: 0.85;
    line-height: 40px;
    min-width: 100%;
  }
  .el-icon-switch-button {
    cursor: pointer;
    outline:0;
  }
</style>
